<!DOCTYPE html>

<html lang="en" class="app">

<head>  

  <meta charset="utf-8" />

  <title>Musik | Web Application</title>

  <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

  <link rel="stylesheet" href="js/jPlayer/jplayer.flat.css" type="text/css" />

  <link rel="stylesheet" href="css/bootstrap.css" type="text/css" />

  <link rel="stylesheet" href="css/animate.css" type="text/css" />

  <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />

  <link rel="stylesheet" href="css/simple-line-icons.css" type="text/css" />

  <link rel="stylesheet" href="css/font.css" type="text/css" />

  <link rel="stylesheet" href="css/app.css" type="text/css" />  

    <!--[if lt IE 9]>

    <script src="js/ie/html5shiv.js"></script>

    <script src="js/ie/respond.min.js"></script>

    <script src="js/ie/excanvas.js"></script>

  <![endif]-->

</head>

<body class="" style="overflow-y: auto;">

  <section class="vbox">

    <header class="bg-white-only header header-md navbar navbar-fixed-top-xs">
      
      <div class="navbar-header aside bg-info">

        <a href="index.html" class="navbar-brand text-lt">

          <i class="icon-earphones"></i>

          <img src="images/logo.png" alt="." class="hide">

          <span class="hidden-nav-xs m-l-sm">睿支付 | RPay</span>

        </a>
        <a class="btn btn-link visible-xs" data-toggle="dropdown" data-target=".user">

          <i class="icon-settings"></i>

        </a>
      </div> 
      <style>
       
      @media (max-width: 1060px) {
        .hidden-xs-1060 {
          display: none !important;
        }
      }
      </style>
      <div class="navbar-left aside-xl m-t-md m-l-md hidden-xs">
        <div class="m-b-sm">
          <div class="btn-group btn-group-justified">
            <a href="#" class="col-lg-4" style="text-align:center;">产品与服务</a>
            <a href="#" class="col-lg-4" style="text-align:center;">开发者中心</a>
            <a href="#" class="col-lg-4" style="text-align:center;">帮助中心</a>
          </div>
        </div>
      </div>

      <div class="navbar-right">

        <ul class="nav navbar-nav m-n hidden-xs nav-user user">

          <li class="hidden-xs">

            <a href="#" class="dropdown-toggle lt" data-toggle="dropdown">

              <i class="icon-bell"></i>

              <span class="badge badge-sm up bg-danger count">2</span>

            </a>

            <section class="dropdown-menu aside-xl animated fadeInUp">
              <section class="panel bg-white">
                <div class="panel-heading b-light bg-light">
                  <strong>您有 <span class="count">2</span> 个通知</strong>
                </div>

                <div class="list-group list-group-alt">
                  <a href="#" class="media list-group-item">
                    <span class="pull-left thumb-sm">
                      <img src="images/a0.png" alt="..." class="img-circle">
                    </span>
                    <span class="media-body block m-b-none">
                      这是消息内容<br>
                      <small class="text-muted">10 minutes ago</small>
                    </span>
                  </a>
                </div>

                <div class="panel-footer text-sm">
                  <a href="#" class="pull-right"><i class="fa fa-cog"></i></a>
                  <a href="#notes" data-toggle="class:show animated fadeInRight">查看所有消息通知</a>
                </div>

              </section>

            </section>

          </li>

          <li class="dropdown">
            <a href="#" class="dropdown-toggle bg clear" data-toggle="dropdown">
              <span class="thumb-sm avatar pull-right m-t-n-sm m-b-n-sm m-l-sm">
                <img src="images/a0.png" alt="...">
              </span>
              高元 <b class="caret"></b>
            </a>

            <ul class="dropdown-menu animated fadeInRight">            
              <li>
                <span class="arrow top"></span>
                <a href="#">账户信息</a>
              </li>
              <li><a href="profile.html">系统状态</a></li>
              <li><a href="#">开发设置</a></li>
              <li><a href="docs.html">设置</a></li>
              <li class="divider"></li>
              <li><a href="modal.lockme.html" data-toggle="ajaxModal" >退出</a></li>

            </ul>

          </li>

        </ul>

      </div>      
      <form class="navbar-form navbar-right input-s-lg m-t m-l-n-xs hidden-xs-1060" role="search">
        <div class="form-group">
          <div class="input-group">
            <span class="input-group-btn">
              <button type="submit" class="btn btn-sm bg-white btn-icon rounded"><i class="fa fa-search"></i></button>
            </span>
            <input type="text" class="form-control input-sm no-border rounded" placeholder="搜索">
          </div>
        </div>
      </form>
    </header>

    <section>
      <section class="hbox stretch">
        <section id="content">
            <div class="col-sm-12 no-padder">
              <div class="bg-primary wrapper-md r" style="height:600px;">
                <a href="#">
                  <span class="h4 m-b-xs block"><i class=" icon-user-follow i-lg"></i> Login or Create account</span>
                  <span class="text-muted">Save and share your playlist with your friends when you log in or create an account.</span>
                </a>
              </div>
            </div>

            <div class="col-sm-12 no-padder">
              <div class="bg-black wrapper-md r" style="height:600px;">
                <a href="#">
                  <span class="h4 m-b-xs block"><i class="icon-cloud-download i-lg"></i> Download our app</span>
                  <span class="text-muted">Get the apps for desktop and mobile to start listening music at anywhere and anytime.</span>
                </a>
              </div>
            </div>

            <div class="col-sm-12 no-padder">
              <div class="bg-primary wrapper-md r" style="height:600px;">
                <a href="#">
                  <span class="h4 m-b-xs block"><i class=" icon-user-follow i-lg"></i> Login or Create account</span>
                  <span class="text-muted">Save and share your playlist with your friends when you log in or create an account.</span>
                </a>
              </div>
            </div>

            <div class="col-sm-12 no-padder">
              <div class="bg-black wrapper-md r" style="height:600px;">
                <a href="#">
                  <span class="h4 m-b-xs block"><i class="icon-cloud-download i-lg"></i> Download our app</span>
                  <span class="text-muted">Get the apps for desktop and mobile to start listening music at anywhere and anytime.</span>
                </a>
              </div>
            </div>  


         

          <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen,open" data-target="#nav,html"></a>

        </section>

      </section>

    </section>    

  </section>

  <script src="js/jquery.min.js"></script>

  <!-- Bootstrap -->

  <script src="js/bootstrap.js"></script>

  <!-- App -->

  <script src="js/app.js"></script>  

  <script src="js/slimscroll/jquery.slimscroll.min.js"></script>

    <script src="js/app.plugin.js"></script>

  <script type="text/javascript" src="js/jPlayer/jquery.jplayer.min.js"></script>

  <script type="text/javascript" src="js/jPlayer/add-on/jplayer.playlist.min.js"></script>

  <script type="text/javascript" src="js/jPlayer/demo.js"></script>



</body>

</html>